<template>
  <van-popup v-model:show="showPopup" closeable round>
    <div class="face-swiping">
      <van-divider
        :style="{
          width: '128px',
          color: '#000',
          borderColor: '#000',
          fontSize: '17px',
          fontWidth: '700',
          margin: '0'
        }"
      >
        <span class="face-title">签署校验</span>
      </van-divider>
      <div class="face-content">
        <span class="fece-one">请刷脸以确认本人操作</span>
        <span class="fece-twe">刷脸通过后即可完成文件签署</span>
      </div>
      <van-button class="fece-btn" type="primary" @click="goToURLClick"
        >打开人脸识别校验</van-button
      >
    </div>
  </van-popup>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'
import { useStore } from '@/store'

import { setItem } from '@/utils/storage'
import { postFaceSwiping } from '@/api/face-swiping'
export default defineComponent({
  setup() {
    const store = useStore()
    const showPopup = ref(false)
    const showFaceSwipingPopup = () => {
      showPopup.value = true
    }
    // 跳第三方刷脸
    const goToURLClick = async () => {
      const returnUrl = `${window.location.href}&thirdparty=tenxun`
      const params = {
        realName: store.state.login.userInfo.userName,
        certificateNumber: store.state.login.userInfo.idNumber,
        isPhone: true,
        returnUrl: returnUrl
      }
      const res = await postFaceSwiping(params)
      if (res.code !== '0') return
      setItem('bizNo', res.data.bizNo)
      window.location.href = res.data.h5FaceUrl
    }
    return { showPopup, showFaceSwipingPopup, goToURLClick }
  }
})
</script>

<style scoped lang="less">
.face-swiping {
  width: 280px;
  height: 172px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  padding: 10px 0;
  .face-title {
    font-size: 17px;
    font-weight: 700;
  }
  .face-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    .fece-one {
      font-size: 15px;
      color: #000;
      padding-bottom: 10px;
    }
    .fece-twe {
      font-size: 13px;
      color: #a5a5a5;
    }
  }
  .fece-btn {
    width: 160px;
    height: 40px;
    border-radius: 4px;
    font-size: 16px;
  }
}
</style>
